<template>
    <div style="height: 100vh;">
      <el-container>
        <el-header style="background-color: #545c64; color: #fff; height: 110px;">
            <div  style="text-align: left; margin-top: 15px;">

              <div style="float: left;text-align: center;">
                <table>
                <tr>
                  <td>  <h1 style="font-size: 40px;">洋神传媒有限责任公司</h1></td>
                  <td>
                    <p>
                      &nbsp;
                  <el-button class="{'custom-button':isActive}" @click="toggleActive" round style="margin-left: 1px;font-size: 20px; border: none; color: #fff;background-color: #545c64 ;">
                  <el-button style="margin-left: 1px;" circle></el-button>
                  集团管理
                </el-button>
                    </p>
                   </td>
                  <td>
                    <p>
                      &nbsp;
                      <el-button class="{'custom-button':isActive}" @click="toggleActive" round style="margin-left: 1px;font-size: 20px;border: none; color: #fff;background-color: #545c64 ;">
                        <el-button style="margin-left: 1px;" circle></el-button>
                  企业管理
                </el-button>
                    </p>
                  </td>
                  <td>
                    <p>
                      &nbsp;
                      <el-button class="{'custom-button':isActive}" @click="toggleActive" round style="margin-left: 1px;font-size: 20px;border: none; color: #fff;background-color: #545c64 ;">
                        <el-button style="margin-left: 1px;" circle></el-button>
                  平台运营
                </el-button>
                    </p>
                  </td>
                  <td>
                    <p>
                      &nbsp;
                      <el-button class="{'custom-button':isActive}" @click="toggleActive" round style="margin-left: 1px;font-size: 20px;border: none; color: #fff;background-color: #545c64 ;">
                        <el-button style="margin-left: 1px;" circle></el-button>
                  系统设置
                </el-button>
                    </p>
                  </td>
                </tr>
              </table>
              </div>
              <div style="float: right;text-align: center;margin-top: 20px;">
                <el-button :icon="Search" circle />
                &nbsp;&nbsp;<el-button  circle />
                &nbsp;&nbsp;<span>姓名</span>
                &nbsp;&nbsp;<span>应用市场</span>
                &nbsp;&nbsp;<span>客户端</span>
              </div>
              
              
              
               
            </div>
          
        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
        default-active="2"
        style="height: 100vh;"
        class="el-menu-vertical-demo"
      >
        
     
        <el-sub-menu index="1">
          <template #title>
           <h3><span>企业管理</span></h3> 
          </template>
          <el-menu-item-group >
            <el-menu-item index="1-1" @click="To('TraceabilityIndex')">溯源管理</el-menu-item>
            <el-menu-item index="1-2">溯源详情</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
           <h3><span>全局日志管理器</span></h3> 
          </template>
          <el-menu-item-group >
            <el-menu-item index="2-1" @click="To('LogIndexFilter')">系统日志</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item @click="To('exeit')" index="5">
          <span>退出</span>
          
        </el-menu-item>
    
      
      </el-menu>
          </el-aside>
          <el-main><RouterView /></el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <script lang="ts" setup>
  import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { reactive, ref,onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router=useRouter()
const route = useRoute()
import axios from 'axios'
const from=reactive({
  isActive:false
})

const toggleActive=()=>{
  console.log(11);
  
  from.isActive = !from.isActive;
}
const To=(val:any)=>{
    switch(val){
      case 'exeit':
        localStorage.removeItem("token");
        router.push("/")
        break;
      case 'TraceabilityIndex':
        router.push({name:'TraceabilityIndex'})
        break;
        case 'LogIndexFilter':
        router.push({name:'LogIndexFilter'})
        break;
    }
}
</script>
<style scoped>
.custom-button {
 
  background-color: #ff5722;
 
}
span{
    margin-right: 15px;
    cursor: pointer;
}
</style>